<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光标跟随效果</title>
</head>
<style>
        .cursor {
            background-color: black;
            width: 5px;
            height: 20px;
            animation-name: blink;
            animation-duration: 0.5s;
            animation-iteration-count: infinite;
        }
        .text-container{
            width: 500px;
            border: 1px black solid;
        }
        @keyframes blink {
            0% {
                opacity: 1;   /* 完全显示 */
            }
            50% {
                opacity: 0.3; /* 部分透明度 */
            }
            100% {
                opacity: 1;   /* 完全显示 */
            }
        }
</style>
<body>
    <div class="text-container">
        <div class="cursor"></div>
        <div class="text"> </div>
    </div>
    <script>
       const container = document.querySelector('.text-container');
       const textElem = document.querySelector('.text');
       const cursor = document.querySelector('.cursor');
       
       async function autoAppend(){
            
            function delay(ms) {
                return new Promise((resolve) => setTimeout(resolve, ms));
            }
            function transfer(text){
                return `<p>${text}</p>`;
            }
            const content = `据民宿平台途家提供的数据显示，2024年元旦热门城市民宿预订量同比2023年同期增长超5倍，哈尔滨首次登顶最受欢迎民宿目的地，
            重庆、成都分列二、三位。在东北城市中，哈尔滨2024年元旦民宿预订量比2023年同期增长了27倍，沈阳增长20倍，延边增长8倍，长春、牡丹江等增速居前。
                去哪儿网提供的数据显示，该平台2024年元旦期间飞往漠河的机票预订量较2019年同期增长7成，酒店预订量增长达3倍。
                携程数据显示，2023年12月1日至12月14日平台对哈尔滨冰雪大世界的搜索量比去年同期增长11倍，较2019年同期增长215%。`;
            for (var i = 0; i <content.length; i++) {
                let text = content.slice(0,i);    
                let result = transfer(text);
                textElem.innerHTML = result;
                updateCursor();
                await delay(100);
            }
       }
       autoAppend();

       function getLastTextNode(node) {
            if(node.nodeType===Node.TEXT_NODE){
                return node;
            }
            const children = node.childNodes;
            for(let i = children.length-1;i>=0;i--) {
                const child = children[i];
                const result = getLastTextNode(child);
                if(result){
                    return result;
                }
            }
            return null;
       }

       function updateCursor(){
            // 1. 追加一个文字到末尾
            const lastTextNode =  getLastTextNode(textElem);
            const textNode = document.createTextNode('测');
            if(lastTextNode){
                lastTextNode.parentNode.appendChild(textNode);
            }else{
                textElem.appendChild(textNode);
            }
            
            // 2. 获取追加的文字位置
            const range = document.createRange();
            range.setStart(textNode,0);
            range.setEnd(textNode,0);
            const rect = range.getBoundingClientRect(); 

            // 3. 根据位置设置光标位置
            const containerRect = container.getBoundingClientRect(); 
            const x = rect.x - containerRect.x;
            const y = rect.y - containerRect.y;
            cursor.style.transform =`translate(${x}px,${y}px)`;
            // 4. 移除追加的文字
            textNode.remove();
       }

    </script>
</body>
</html>


